<template>
  <el-drawer
    v-model="dialogVisible"
    :show-close="false"
    :title="TYPE_TITLE[type]"
    size="27%"
    direction="ltr"
    :close-on-click-modal="false"
    center
  >
    <template #header>
      <div>
        <el-button type="info" @click="closeDialog" class="padding-10px"
          >关闭</el-button
        >
      </div>
    </template>
    <!-- 事故分析 -->
    <div v-if="type === 'accident' || type === 'deathAccident'">
      <template v-for="item in listData" :key="item.id">
        <div class="statistics">
          <div class="stat-item" style="width: 60%">
            <el-tooltip
              style="width: 100%"
              effect="dark"
              :content="item.reason"
              placement="top"
            >
              <div class="stat-value ellipsis" style="font-size: 18px">
                {{ item.reason }}
              </div>
            </el-tooltip>
            <div class="stat-label">事故原因</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ item.count }}</div>
            <div class="stat-label">事故数量</div>
          </div>
        </div>

        <el-divider style="margin: 6px 0 0" />

        <div
          class="list-container mb-10px max-h-900px overflow-hidden overflow-y-auto"
        >
          <div
            v-for="(info, idx) in item.accidentInfos"
            :key="info.djbh"
            class="list-item"
            @click="showDetail(info)"
          >
            <div class="item-main">
              <el-tooltip
                style="width: 100%"
                effect="dark"
                :content="info.sgdd + info.lm"
                placement="top"
              >
                <div class="item-title ellipsis">
                  {{ idx + 1 }}、{{ info.sgdd + info.lm }}
                </div>
              </el-tooltip>
              <div class="item-info">
                <span class="info-tag">受伤: {{ info.ssrs }}人</span>
                <span class="info-tag">死亡: {{ info.swrs }}人</span>
              </div>
            </div>
            <div>
              隔离设施: {{ info.dlwlgl }} 中央隔离设施:
              {{ info.zyglss }} 路侧防护设施: {{ info.fhss }} 路面情况:
              {{ info.lmzk }} 路表情况: {{ info.lbqk }} 照明条件:
              {{ info.zmtj }}
            </div>
          </div>
        </div>
      </template>
    </div>
    <div v-else>
      <!-- 统计数据 头部-->
      <div class="statistics" v-if="type !== 'statisticHeatMap'">
        <template v-if="type === 'construction'">
          <div class="stat-item">
            <div class="stat-value">{{ statistics.total }}</div>
            <div class="stat-label">施工总数</div>
          </div>
        </template>
        <template v-else-if="type === 'alarm'">
          <div class="stat-item">
            <div class="stat-value">{{ statistics.total }}</div>
            <div class="stat-label">警情总数</div>
          </div>
        </template>
        <template v-else-if="type === 'vioSurveil'">
          <div class="stat-item">
            <div class="stat-value">{{ statistics.total }}</div>
            <div class="stat-label">违法总数</div>
          </div>
        </template>
      </div>

      <el-divider style="margin: 6px 0 0" />

      <!-- 列表数据 -->
      <div class="list-container max-h-900px overflow-hidden overflow-y-auto">
        <!-- 施工列表 -->
        <template v-if="type === 'construction'">
          <div
            v-for="(item, idx) in listData"
            :key="item.id"
            class="list-item"
            @click="showDetail(item)"
          >
            <div class="item-main">
              <div>{{ idx + 1 }}、{{ item.projectName }}</div>
            </div>
          </div>
        </template>

        <!-- 警情列表 -->
        <template v-else-if="type === 'alarm'">
          <div
            v-for="(item, idx) in listData"
            :key="item.id"
            class="list-item"
            @click="showDetail(item)"
          >
            <div class="item-main">
              <div>{{ idx + 1 }}、{{ item.occurPlace }}</div>
            </div>
          </div>
        </template>

        <!-- 违法列表 -->
        <template v-else-if="type === 'vioSurveil'">
          <div
            v-for="(item, idx) in listData"
            :key="item.id"
            class="list-item"
            @click="showDetail(item.type)"
          >
            <div class="item-main">
              <div>{{ idx + 1 }}、{{ item.wfdz }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </el-drawer>
  <!-- 详情弹窗 -->
  <el-dialog
    draggable
    v-model="detailVisible"
    :title="TYPE_DETAIL_TITLE[type] || ''"
    width="500px"
    center
    @close="closeDetailDialog"
  >
    <div class="max-h-400px overflow-y-auto p-10px">
      <div
        v-for="(value, key) in currentDetail"
        :key="key"
        class="flex mb-12px leading-20px text-#fff"
      >
        {{ key }}: {{ value }}
      </div>
    </div>
  </el-dialog>

  <Statistic
    v-model:showStatistic="showStatistic"
    :type="type"
    :listData="listData"
  />
  <!-- 漫游弹窗 -->
  <FixedRoute v-if="booleanStore.fixedRouteShow" />
</template>

<script lang="ts" setup>
import { TYPE_TITLE, TYPE_DETAIL_TITLE } from "@/const/home";
import { attributeMapping } from "@/const/mapConfig";
import { transformAttributes } from "@/utils";
import { useRectangleDialog, useBoolean } from "@/store";
import {
  GetCompareAnalysis,
} from "@/service/api/map";
import Statistic from "./statistic.vue";
import FixedRoute from "./fixed-route.vue";
import dayjs from "dayjs";
// import AccidentDetail from "@/components/EmergencyPaging/AccidentDetail.vue";

interface Props {
  timeData: any; // 接收父组件传递的 timeData
}

const props = defineProps<Props>();

const rectangleStore = useRectangleDialog();
const booleanStore = useBoolean();

const dialogVisible = ref<boolean>(false);
const detailVisible = ref<boolean>(false);
const showStatistic = ref<boolean>(false); //维度分析弹窗
const type = ref<string>(""); //弹窗类型
const listData = ref<any>([]); //列表数据
const currentDetail = ref<any>({}); //详情弹窗数据
const params = ref<any>({
  startTime: "2025-01-01 00:00:00",
  endTime: "2025-08-10 00:00:00",
  radius: "200",
  minPoints: "1",
});
// 统计数据
const statistics = computed(() => {
  if (!listData.value.length) return { total: 0, injured: 0, dead: 0 };
  return {
    total: listData.value.length,
  };
});

watch(
  () => rectangleStore.show,
  (newVal) => {
    booleanStore.setState(!newVal);
    type.value = rectangleStore.type;
    listData.value = rectangleStore.data;
    if (type.value === "statisticHeatMap") {
      // booleanStore.setLeftState(true);
      monthCountListMap();
      showStatistic.value = true;
      dialogVisible.value = false;
    } else {
      dialogVisible.value = newVal;
      showStatistic.value = false;
    }
  }
);

const monthCountListMap = async () => {
  try {
    const { draw } = window.cesiumInit;
    params.value.startTime = dayjs(props.timeData[0]).format(
      "YYYY-MM-DD HH:mm:ss"
    );
    params.value.endTime = dayjs(props.timeData[1]).format("YYYY-MM-DD HH:mm:ss");
    const res = await GetCompareAnalysis(params.value);
    draw.addMouthInPolyBillboard(res)
  } catch (err) {
    console.error("获取数据失败:", err);
  }
};
// 关闭弹窗时保存 type 的值
const closeDialog = () => {
  rectangleStore.setState(false, type.value, listData.value); // 关闭弹窗，但保留 type 和数据
  if (rectangleStore.type !== "statisticHeatMap") {
    rectangleStore.setState(false, "", []); // 关闭弹窗，但保留 type 和数据
    booleanStore.setState(false);
  }
  booleanStore.setFooterToolShow(true); // 显示底部工具栏
};

// 详情弹窗打开
const showDetail = (item) => {
  let types = type.value;
  if (types === "accident") types = "accidentHotMapDetail";
  currentDetail.value = transformAttributes(item, types, attributeMapping);
  detailVisible.value = true;
  dialogVisible.value = false;
};

// 详情弹窗关闭
const closeDetailDialog = () => {
  detailVisible.value = false;
  dialogVisible.value = true;
};
</script>

<style lang="less" scoped>
.statistics {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;

  .stat-item {
    text-align: center;
    padding: 0 10px;

    .stat-value {
      font-size: 24px;
      font-weight: bold;
      color: #409eff;
      line-height: 1.2;
    }

    .stat-label {
      font-size: 15px;
      color: white;
      margin: 5px 0;

      &::-webkit-scrollbar {
        height: 5px;
        background: rgba(0, 0, 0, 0.3);
      }
    }
  }
}

.list-item {
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s;
  color: white;

  &:hover {
    background-color: #10101059;
  }

  .item-main {
    flex: 1;
    display: flex;
    justify-content: space-between;

    .item-title {
      font-weight: 500;
      color: white;
      margin-bottom: 4px;
      width: 66%;
    }

    .item-info {
      display: flex;
      gap: 10px;
      margin-left: 10px;

      .info-tag {
        font-size: 12px;
        color: #409eff;
        background-color: #ecf5ff;
        padding: 2px 6px;
        border-radius: 4px;
      }
    }
  }
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.el-button {
  &.el-button--info {
    border: none !important;
    /* 移除边框 */
    background: url("@/assets/img/select-location.png") center/cover no-repeat !important;
    color: #fff !important;
    /* 确保文字可见 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 85px;

    /* 移除Element默认的hover/active效果 */
    &:hover,
    &:active,
    &:focus {
      background: url("@/assets/img/select-location.png") center/cover no-repeat !important;
      opacity: 0.9;
      /* 添加悬停效果 */
    }
  }

  &.el-button--primary {
    border: none !important;
    /* 移除边框 */
    background: url("@/assets/img/select-location-plan.png") center/cover
      no-repeat !important;
    color: #fff !important;
    /* 确保文字可见 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 85px;

    /* 移除Element默认的hover/active效果 */
    &:hover,
    &:active,
    &:focus {
      background: url("@/assets/img/select-location-plan.png") center/cover
        no-repeat !important;
      opacity: 0.9;
      /* 添加悬停效果 */
    }
  }
}
</style>

<style lang="less">
.el-drawer {
  background-color: #00313780 !important;
}

.el-dialog__title {
  color: #fff !important;
}

.el-dialog__header .el-dialog__close {
  color: #fff !important;
}
</style>
